<template>
	<view :class="['card-title', clasName]">
		<view class="img-box"><image :src="`/static/${imgName}.png`" alt="" class="img"></image>
		</view>
		<view class="title" :style="`color: ${titleColor}`">{{title}}
		<view class="line" v-if="showLine" :style="`background: ${lineColor}; opacity:${opacity || 1};`"></view>
		</view>
		<slot></slot>
	</view>
</template>

<script setup>
const props = defineProps({
	imgName: String, 
	title: String,
	lineColor: {
		type: String,
		default: "#6891FA"
	},
	showLine: {
		type: String,
		default: true
	},
	titleColor: {
		type: String,
		default: '#1B1D20'
	},
	opacity:String,
	clasName: String
	});
</script>

<style lang="scss" scoped>
.icon-bg .img-box {
	background: #fff;
	width: 38rpx;
	height: 38rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	image {
		width: 34rpx;
		height: 36rpx;
	}
}
.card-title {
	display: flex;
	align-items: center;
	position: relative;
}
.img {
	width: 45rpx;
	height: 45rpx;
}
.title {
	font-size: 34rpx;
	font-family: Source Han Sans CN;
	color: #1B1D20;
	margin-left: 16rpx;
	position: relative;
	font-weight: bold;
	z-index: 1;
	.line {
		position: absolute;;
		background: #6891FA;
		height: 8rpx;
		width: 100%;
		position: absolute;
		bottom: 5rpx;
		right: 0;
		z-index: -1;
	}
}
</style>